<script setup lang="ts">
import { ref  ,onMounted} from 'vue'
import { PaintBoard } from '@/utils/paintBoard'
import { CANVAS_ELE_TYPE } from '@/utils/constants'
import ToolPanel from '../../components/toolPanel/toolPanel.vue'

import { useBackspace, useResizeEvent, useSpaceEvent } from '@/hooks/event'
// import Info from '../../components/info'
import { CURSOR_TYPE } from '@/utils/cursor'
import { TextEdit } from '@/utils/element/text'
const hellow = ref({})

const textEdit = new TextEdit()

const canvasRef = ref(null)
const board = ref()
  onMounted(() => {
  if (canvasRef.value) {
    board.value =  new PaintBoard(canvasRef.value)
  }
  hellow.value = {name:'name',age:11}
  console.log(
    board.value
  );
  
})

// 工具类型
const toolType = ref<string>(CANVAS_ELE_TYPE.FREE_DRAW);
const setToolType = function(type:string){
  console.log(type);
  toolType.value = type
}

const handleToolType = (type: string) => {
  if (board.value) {
    if (type !== CANVAS_ELE_TYPE.SELECT) {
      board.value.select.cancelSelectElement()
    }
    setToolType(type)
    board.value.render()
  }
}

// 是否按下空格
const isPressSpace = useSpaceEvent(
  () => {
    if (board.value) {
      board.value.cursor.change(CURSOR_TYPE.POINTER)
      board.value.initOriginPosition()
    }
  },
  () => {
    if (board.value) {
      board.value.cursor.reset()
    }
  }
)
useResizeEvent(() => {
  if (board.value) {
    board.value.initCanvasSize()
    board.value.context.translate(board.value.originTranslate.x, board.value.originTranslate.y)
    board.value.render()
  }
})

useBackspace(() => {
  if (board.value) {
    board.value.select.deleteSelectElement()
  }
})
// 监听鼠标事件
// const [isMouseDown, setIsMouseDown] = useState<boolean>(false)

const isMouseDown = ref(false)
const setIsMouseDown = function(value){
  isMouseDown.value = value
}
const mouseDown = (event: MouseEvent) => {
  if (board.value) {
    const { clientX: x, clientY: y } = event
    const position = {
      x,
      y
    }
    // 如果有文本编辑框，取消编辑
    if (textEdit) {
      board.value.addTextElement(textEdit.value, textEdit.rect)
      textEdit.destroy()
    }
    switch (toolType.value) {
      case CANVAS_ELE_TYPE.SELECT:
        board.value.select.clickSelectElement(position)
        break
      case CANVAS_ELE_TYPE.FREE_DRAW:
      case CANVAS_ELE_TYPE.ERASER:
        if (!isPressSpace.value) {
          board.value.recordCurrent(toolType.value)
        }
        break
      default:
        break
    }
    setIsMouseDown(true)
  }
}

const dbClick = (event: MouseEvent) => {
  if (board.value) {
    const { clientX: x, clientY: y } = event
    const position = {
      x,
      y
    }
    // 双击展示文字输入框
    textEdit.showTextInput(position)
  }
}
const mouseMove = (event: MouseEvent) => {
  if (board.value) {
    const { clientX: x, clientY: y } = event
    if (isPressSpace.value && isMouseDown.value) {
      board.value.dragCanvas({
        x,
        y
      })
    } else {
      switch (toolType.value) {
        case CANVAS_ELE_TYPE.SELECT:
          board.value.select.moveSelectElement({
            x,
            y
          })
          break
        case CANVAS_ELE_TYPE.FREE_DRAW:
        case CANVAS_ELE_TYPE.ERASER:

          if (isMouseDown.value) {
            board.value.currentAddPosition({
              x,
              y
            })
          }
          break
        default:
          break
      }
    }
  }
}

const mouseUp = () => {
  if (board.value) {
    setIsMouseDown(false)
    board.value.canvasMouseUp()
  }
}


</script>

<template>
  <div class="flex justify-center items-center flex-col w-screen h-screen">
    <ToolPanel v-if="board" :board="board" :toolType="toolType" :setToolType="handleToolType" />
    <canvas
      style="display: block;
      vertical-align: middle;"
      ref="canvasRef"
      @mousedown="mouseDown"
      @mousemove="mouseMove"
      @mouseup="mouseUp"
      @dbclick="dbClick"
    ></canvas>
    <div style="position:absolute;top:20px">
      <p class="icon-dakaqiandao" style="color: #ccc;"></p>
    </div>
    <!-- <Info /> -->
  </div>
</template>

<style scoped>

</style>
